<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏打卡系统 (本地NFC)</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .container { max-width: 600px; margin: 0 auto; }
        h1 { text-align: center; color: #333; }
        #message { margin-top: 20px; padding: 15px; border-radius: 5px; text-align: center; margin-bottom: 20px; }
        .info { background-color: #e9ecef; color: #333; border: 1px solid #ced4da; }
        .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        #log-table { width: 100%; border-collapse: collapse; margin-top: 30px; }
        #log-table th, #log-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        #log-table th { background-color: #f2f2f2; }
        #scan-button { padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 5px; }
        #scan-button:disabled { background-color: #6c757d; cursor: not-allowed; }
    </style>
</head>
<body>

    <div class="container">
        <h1>游戏打卡 (NFC 直接读取)</h1>
        
        <button id="scan-button" onclick="startNFCScan()">开始 NFC 扫描</button>
        <div id="message" class="info">点击按钮，然后靠近 NFC 贴纸进行打卡。</div>

        <h2>已完成游戏项目记录</h2>
        <button onclick="clearLogs()">清除所有记录 (慎用)</button>
        <table id="log-table">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>打卡时间</th>
                </tr>
            </thead>
            <tbody>
                </tbody>
        </table>
    </div>

    <script>
        let ndef;
        const decoder = new TextDecoder();

        // ----------------------------------------------------
        // 1. 数据存储和表格生成函数 (与之前相同)
        // ----------------------------------------------------

        function getLogs() {
            const logs = localStorage.getItem('gameCheckinLogs');
            return logs ? JSON.parse(logs) : [];
        }

        function saveLogs(logs) {
            localStorage.setItem('gameCheckinLogs', JSON.stringify(logs));
        }

        function recordCheckin(id, name) {
            const logs = getLogs();
            const now = new Date();
            
            // 检查是否在短时间内重复打卡
            const lastLog = logs.length > 0 ? logs[logs.length - 1] : null;
            if (lastLog && lastLog.id === id && (now.getTime() - new Date(lastLog.time).getTime() < 3000)) {
                showMessage(`重复打卡：${name} 已在几秒前打卡。`, 'error');
                return;
            }

            const newLog = {
                id: id,
                name: name,
                time: now.toLocaleString('zh-CN', { hour12: false }) // 格式化时间
            };

            logs.push(newLog);
            saveLogs(logs);
            generateTable(logs);
            showMessage(`打卡成功！孩子：${name} (编号: ${id})`, 'success');
        }

        function generateTable(logs) {
            const tbody = document.querySelector('#log-table tbody');
            tbody.innerHTML = ''; 

            logs.forEach(log => {
                const row = tbody.insertRow();
                row.insertCell().textContent = log.id;
                row.insertCell().textContent = log.name;
                row.insertCell().textContent = log.time;
            });
        }

        function showMessage(text, type) {
            const messageDiv = document.getElementById('message');
            messageDiv.textContent = text;
            messageDiv.className = `info ${type}`; 
        }

        function clearLogs() {
            if (confirm("确定要清除所有打卡记录吗？此操作不可逆！")) {
                localStorage.removeItem('gameCheckinLogs');
                generateTable([]);
                showMessage('所有记录已清除。', 'error');
            }
        }

        // ----------------------------------------------------
        // 2. Web NFC API 逻辑 (新内容)
        // ----------------------------------------------------
        
        function checkNFCSupport() {
            if ('NDEFReader' in window) {
                showMessage("NFC 支持：已检测到 Web NFC API。请点击 '开始 NFC 扫描'。", 'info');
                document.getElementById('scan-button').disabled = false;
                ndef = new NDEFReader();
                setupNFCListeners();
            } else {
                showMessage("NFC 错误：您的浏览器/设备不支持 Web NFC API。该功能无法使用。", 'error');
                document.getElementById('scan-button').disabled = true;
            }
        }

        function setupNFCListeners() {
            ndef.onreadingerror = () => {
                showMessage("读取错误：无法读取数据或标签格式不正确。", 'error');
            };

            ndef.onreading = event => {
                console.log("NDEF 消息读取成功:", event);
                
                // 遍历 NFC 消息中的所有记录
  